<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
	<th:block th:include="include :: header('新增信息')" />
	<!-- 引入jQuery库，确保路径正确 -->
	<script src="js/plugins/jquery.min.js"></script>
</head>

<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
	<form class="form-horizontal m" id="form-post-add">
		<div class="form-group">
			<label class="col-sm-3 control-label is-required">学生编号：</label>
			<div class="col-sm-8">
				<select class="form-control" name="name" id="name" required>
					<!-- 动态选项将在这里插入 -->
				</select>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-3 control-label is-required">课程名称：</label>
			<div class="col-sm-8">
				<select class="form-control" name="course" id="course" required>
					<option value=3>英语</option>
					<option value=1>语文</option>
					<option value=2>数学</option>
				</select>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-3 control-label is-required">学生成绩：</label>
			<div class="col-sm-8">
				<input class="form-control" type="text" name="grads" id="grads" required>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-3 control-label">备注：</label>
			<div class="col-sm-8">
				<textarea id="remark" name="remark" class="form-control"></textarea>
			</div>
		</div>
	</form>
</div>
<th:block th:include="include :: footer" />
<script type="text/javascript">
	var prefix = ctx + "system/grad";

	$("#form-post-add").validate({
		onkeyup: false,
		messages: {
			"postCode": {
				remote: "岗位编码已经存在"
			},
			"postName": {
				remote: "岗位名称已经存在"
			}
		},
		focusCleanup: true
	});

	function submitHandler() {
		if ($.validate.form()) {
			$.operate.save(prefix + "/add", $('#form-post-add').serialize());
		}
	}

	// 获取学生编号列表并填充到下拉框
	$(document).ready(function() {
		function loadStudentIds() {
			$.ajax({
				url: '/system/grad/studentIds', // 服务器端接口地址
				type: 'GET',
				dataType: 'json',
				success: function(data) {
					var select = $('#name');
					select.empty(); // 清空下拉框
					$.each(data, function(index, student) {
						// 确保 student 和 id 存在
						if (student && student.id) {
							select.append($('<option></option>').val(student.id).text(student.id));
						}
					});
				},
				error: function(jqXHR, textStatus, errorThrown) {
					console.error('Error: ' + textStatus, errorThrown);
					alert('获取学生编号列表失败: ' + textStatus);
				}
			});
		}

		loadStudentIds(); // 页面加载完成后调用函数
	});
</script>
</body>

</html>